<template>
  <div class="import">
    <div class="app-container">
      <el-card
        shadow="hover"
        :body-style="{ padding: '20px' }"
      >
        <div slot="header">
          <span>员工导入</span>
        </div>
        <UploadExcel
          :on-success="handleSuccess"
          :before-upload="beforeUpload"
        />
      </el-card>

    </div>
  </div>
</template>

<script>
import { importEmployees } from '@/api/employees.js'
import { formatExcelDate } from '@/utils'
export default {
  methods: {
    // 1、校验上传文件的大小，格式等
    beforeUpload (file) {
      const isLt1M = file.size / 1024 / 1024 < 2
      // 上传excel大小不能超过2M
      if (isLt1M) {
        return true
      }

      this.$message({
        message: '上传大小不能超过2M,充18888会员享受无限制上传',
        type: 'warning'
      })
      return false
    },
    // 2、校验通过之后，通过这个回调函数获取excel中的员工数据
    /**
     *  header 读取excel中的表头
     *  results 读取excel对应的数据（多个）
    */
    async handleSuccess ({ results, header }) {
      this.tableData = results
      this.tableHeader = header
      // console.log(results)
      /**
       * 思路：
       * 1、因为读取到的results中员工数据属性名是中文，需要转换为英文的属性名
       * 2、如果excel中有时间的话，需要格式化时间
       * 3、调用后台接口传入处理好的results数据做上传
      */
      const enResults = this.transformResults(results)
      await importEmployees(enResults)
      this.$message.success('上传成功')
      this.$router.back()
    },
    transformResults (results) {
      // 属性名中英对照映射关系
      const userRelations = {
        '入职日期': 'timeOfEntry',
        '聘用形式': 'formOfEmployment',
        '手机号': 'mobile',
        '姓名': 'username',
        '转正日期': 'correctionTime',
        '工号': 'workNumber',
        '部门': 'departmentName'
      }
      /**
       * 1、准备一个存储转换结果的数据
       * 2、循环results数据，根据userRelations中英对照关系，进行转换
       * 3、返回转换的结果
      */
      const newResults = []
      results.forEach(item => {
        // 中文属性的item（员工信息）转换为英文的
        const enUser = {}
        for (const zhkey in item) {
          // 根据zhKey结合映射关系获取enKey（英文属性）
          const enKey = userRelations[zhkey]
          if (enKey === 'timeOfEntry' || enKey === 'correctionTime') {
            enUser[enKey] = formatExcelDate(item[zhkey], '-')
          } else {
            enUser[enKey] = item[zhkey]
          }
        }
        newResults.push(enUser)
      })
      return newResults
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
